<template>
    <header class="bg-white shadow-md fixed w-full z-50 top-0">
        <nav class="container mx-auto px-6 py-3">
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <a href="/"
                        class="text-gray-800 text-xl font-bold md:text-2xl hover:text-gray-600 transition-all flex gap-4">
                        <svg t="1727248291250" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="6591" width="32" height="32">
                            <path
                                d="M760.470588 0C906.541176 0 1024 114.447059 1024 256v128H760.470588V256h-496.941176v512h496.941176v-128H1024V768c0 141.552941-117.458824 256-263.529412 256h-496.941176C117.458824 1024 0 909.552941 0 768V256C0 114.447059 117.458824 0 263.529412 0h496.941176z"
                                fill="#4F46E5" p-id="6592"></path>
                        </svg>
                        <h2>HtmlCoding</h2>
                    </a>
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <navList name="主页" url="/" />
                    <navList name="源码广场" url="/" />
                    <navList name="项目实战" url="/" />
                    <navList name="订阅会员" url="/front/subscribe" />
                    <navList name="话题讨论" url="/front/topic" />
                    <navList name="最近更新" url="/" />
                    <div class="hidden md:flex">
                        <el-popover placement="bottom" title="购物车" :width="300" trigger="hover">
                            <template #reference>
                                <el-icon class='cursor-pointer'>
                                    <ShoppingCart />
                                </el-icon>
                            </template>
                              <div class="text-center">
                                <div class='p-7'>购物车里空空如也！☺️</div>
                                <div>
                                    <el-button color="#626aef" @click="handleToPage('Cart')">进入购物车</el-button>
                                </div>
                              </div>
                        </el-popover>
                    </div>
                    <div>
                        <el-button color="#626aef" plain @click="handleToPage('Login')">登录</el-button>
                        <el-button color="#626aef" plain @click="handleToPage('Register')">注册</el-button>
                    </div>
                </div>
            </div>
            <div x-show="isOpen" class="md:hidden mt-3">
                <navList name="主页" url="/" />
                <navList name="源码广场" url="/" />
                <navList name="项目实战" url="/" />
                <navList name="订阅会员" url="/front/subscribe" />
                <navList name="话题讨论" url="/front/topic" />
                <navList name="最近更新" url="/" />
                <div class="flex flex-col gap-2 mt-3">
                    <el-button color="#626aef">登录</el-button>
                    <el-button color="#626aef" style="margin-left:0">注册</el-button>
                </div>
            </div>
        </nav>
    </header>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import navList from './navList.vue';
const router = useRouter();

const handleToPage = (name: string) => {
    router.push({ name })
}

</script>

<style scoped></style>